<template>
  <div>
    <div class="inline">
      <div>
        <el-select v-model="systemUnitValue" placeholder="请选择模板" @change="changeSelect">
          <el-option
            v-for="item in systemUnit"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" icon="el-icon-s-tools" v-if="!isAdmin" @click="setupTemplate">设置模板</el-button>
      <template v-if="isAdmin">
        <el-button type="primary" icon="el-icon-edit" @click="openUpdate" :disabled="disableEdit">编辑模板</el-button>
        <el-button type="primary" icon="el-icon-document-checked" @click="cancelUpdate" :disabled="disableEdit">取消编辑
        </el-button>
        <el-button type="primary" icon="el-icon-document-checked" @click="saveUpdate" :disabled="disableEdit">保存模板
        </el-button>
      </template>
    </div>
    <div v-if="isAdmin" class="inline">
      <div>
        <el-input v-model="systemUnitName" placeholder="请输入模板名" style="width: 200px"></el-input>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addSystemUnit">新增模板</el-button>
      </div>
    </div>
  </div>
</template>

<script>
    import {
        getSystemUnit,
        addSystemUnit,
        getSystemUnitById,
        updateSystemUnit,
        updateMetaSystemUnitValue
    } from '@/api/module/category'
    import {get, forOwn} from 'lodash'
    import {mapMutations, mapGetters} from 'vuex'

    export default {
        name: 'category',
        data() {
            return {
                systemUnitValue: '',
                systemUnitName: '',
                systemUnit: [],
                disableEdit: true
            }
        },
        props: {
            isAdmin: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            ...mapMutations([
                'changeShouldUpdate',
                'changeCategoryUnitModel'
            ]),
            openUpdate() {
                if (this.systemUnitValue !== '') {
                    this.changeShouldUpdate(true)
                }
            },
            saveUpdate() {
                let array = []
                forOwn(this.categoryUnitModelGetters, function (value, key) {
                    value.unitCategoryValueName = ''
                    array.push(value)
                })
                updateMetaSystemUnitValue(array).then(() => {
                    this.systemUnitValue = ''
                    this.cancelUpdate()
                })
            },
            addSystemUnit() {
                if (this.systemUnitName !== '') {
                    addSystemUnit(this.systemUnitName).then(() => {
                        this.systemUnitName = ''
                        this.getSystemUnit()
                    })
                }
            },
            getSystemUnit() {
                getSystemUnit().then((res) => {
                    this.systemUnit = get(res, 'data.data', [])
                })
            },
            changeSelect() {
                getSystemUnitById(this.systemUnitValue).then((res) => {
                    let categoryUnitModel = {}
                    get(res, 'data.data', []).forEach((data) => {
                        let metaUnitCategory = get(data, 'metaUnitCategory.id')
                        if (metaUnitCategory) {
                            categoryUnitModel[metaUnitCategory] = {
                                unitId: get(data, 'id', ''),
                                unitCategoryValueId: get(data, 'metaUnitCategoryValue.id', ''),
                                unitCategoryValueName: get(data, 'metaUnitCategoryValue.unitName', '')
                            }
                        }
                    })
                    this.changeCategoryUnitModel(categoryUnitModel)
                })
            },
            setupTemplate() {
                if (this.systemUnitValue !== '') {
                    updateSystemUnit(this.systemUnitValue)
                }
            },
            cancelUpdate() {
                this.changeShouldUpdate(false)
            }
        },
        mounted() {
            this.getSystemUnit()
        },
        watch: {
            systemUnitValue: function () {
                this.disableEdit = this.systemUnitValue === ''
            }
        },
        computed: {
            ...mapGetters([
                'categoryUnitModelGetters'
            ])
        }
    }
</script>

<style scoped>
  .inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px;
  }

  .el-button {
    margin: 5px;
  }
</style>
